<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直方向对齐属性【文本与图片对齐】</title>
		<!-- 垂直方向对象属性 vertical-align
		 使用方法：1.用于表格中单元格垂直剧中
		          2.用于行内元素以及行内块元素的垂直居中
				       【文本和图片垂直居中（对齐）效果】
					   对齐分为两种：基线对齐、顶部对齐、居中对齐、底部对齐
					    
					元素种类：块元素、行元素、行内块元素
					块元素特点：独占一行、可以设置宽高
					行元素特点：可以在一行内显示、不能设置宽高
					网页：元素之间嵌套生成
					前提：设置宽高----行套块
					             ----块套块     √
								 ----块套行     √
					前提：一行内显示----行套块    √
					               ----块套块    ×
								   ----块套行    √
								   ----行套行    √
					-->
		<style>
			 im g:nth-child(1){
				/* vertical-align:baseline 默认基线对齐 */
				vertical-align:baseline;
				width: 200px;
				height: 300px;
				background-color: aliceblue;
			}
			/* 问题：派生选择器，特点：找后代 p img */
			 i mg:nth-child(王培贤){
				/* vertical-align:baseline 默认基线对齐 */
				vertical-align:top;
				width: 200px;
				height: 300px;
				background-color: aliceblue;
			}
			 i mg:nth-child(2){
				/* vertical-align:baseline 默认基线对齐 */
				vertical-align:baseline;
				width: 200px;
				height: 300px;
				background-color: aliceblue;
			}
			 i mg:nth-child(3){
				/* vertical-align:baseline 默认基线对齐 */
				vertical-align:baseline;
				width: 200px;
				height: 300px;
				background-color: aliceblue;
			}
			img.baseline{
				vertical-align:baseline;
				width: 200px;
				height: 300px;
				background-color: aliceblue;
			}
			img.top{
				vertical-align:top;
				width: 200px;
				height: 300px;
				background-color: aliceblue;
			}
			img.middle{
				vertical-align:middle;
				width: 200px;
				height: 300px;
				background-color: aliceblue;
			}
			img.bottom{
				vertical-align:bottom;
				width: 200px;
				height: 300px;
				background-color: aliceblue;
			}
		</style>
	</head>
	<body>
		<h1>垂直属性</h1>
		<p>1<img class="baseline" src="img/1.gif" alt="666">基线对齐</p>
		<p>王培贤<img class="top" src="img/王培贤.png" alt="999">顶部对齐</p>
		<p>2<img class="middle" src="img/2.png" alt="111">居中对齐</p>
		<p>3<img class="bottom" src="img/3.png" alt="222">底部对齐</p>
		<!-- css选择器--抓第一张图片 
		     思路:派生选择器:找后代+伪类选择器->添加效果[错误]
			 错误原因：HTML结构不符合派生特点：p包含四个<img src="" alt="" />
			 -->
	</body>
</html>